<template>
  <div class="content">
    <div class="login-box">
      <div class="login-text">
        <p>Welcome</p>
        <p>黄金珠宝后台管理系统</p>
      </div>
      <div id="login">
        <el-form :model="user" :rules="rules" ref="userRef" label-width="55px">
          <el-form-item label="账号:" prop="username" id="item">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="user.password" show-password></el-input>
          </el-form-item>
          <el-button type="primary" @click="submitForm('userRef')">登录</el-button>
          <el-button @click="resetForm('userRef')">重置</el-button>
          <div class="link">
            <a href="javascript:;">忘记密码？</a>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getRouterApi } from '@/http/userApi'
import { mapActions, } from 'vuex'
export default {
  name:'LoginView',
  data(){
    //自定义校验
    const validateUserName = (rule, value, callback) => {
      const pat = /^\w{3,10}$/i;
      if (pat.test(value)) {
        callback();
      } else {
        callback(new Error("请输入3到8位正确的账号"));
      }
    };
    const validatePassword = (rule, value, callback) => {
      const pat = /^\w{3,16}$/i;
      if (pat.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的6到16位的密码"));
      }
    };
    return{
      user: {
        username: 'admin',
        password: '123123'
      },
      flag:null,
      loginName:null,
      rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 6 到 10 个字符', trigger: 'blur' },
            { validator: validateUserName, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: validatePassword, trigger: 'blur' }
          ],
        }
    }
  },
  methods: {
    ...mapActions(['userStore/setUser','userStore/setRoutes']),
    submitForm(userRef){
      this.$refs[userRef].validate((valid) => {
        if(valid){
          console.log(this.user.username);
          if(this.user.username == 'user'){
            this.flag = 0;
            this.loginName = '普通用户'
          }else if(this.user.username == 'admin'){
            this.flag = 1;
            this.loginName = '管理员'
          }else{
            this.$message.error('账号密码错误')
          }
        
        if(this.user.username == 'user' || this.user.username == 'admin'){
          this['userStore/setUser']({
            token:'123131313',
            name:this.loginName
          })
          getRouterApi(this.flag)
          .then(res => {
            this['userStore/setRoutes']([res.data.routes])
            this.$message({
              type:'success',
              message: '登录成功'
            })
            this.$router.push('/')
          })
        }
          
        }
        // if (valid) {
        //   loginApi(this.user.username,this.user.password)
        //   .then(res => {
        //     if(res.data.code ){
        //       this.$message({
        //         message: '登录成功',
        //         type: 'success'
        //       });
        //       // const {token,touxiang,name} = res.data;
        //       this['userStore/setUser']({
        //         token:'123131313',
        //         name:'管理员'
        //       })
        //       .then(() => {
        //         getRouterApi(1)
        //         .then(res => {
        //           this['userStore/setRoutes']([res.data.routes])
        //         })
        //         .then(() => {
        //           this.$router.push('/')
        //           .catch(() =>{})
        //         })
        //       })
        //     }
        //     else if(res.data.code !== 200){
        //       this.$message.error('登录失败')
        //       console.log(res);
        //     }
        //   })
        //   .catch(err => {
        //     console.log(err);
        //   })
        // } else {
        //   this.$message.error('登录失败')
        //   return false;
        // }
      });
      
    },
    resetForm(userRef){
      this.$refs[userRef].resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>

  .content{
    width: 100%;
    height: 100%;
    background:url(@/assets/image/bg.jpg) no-repeat center;
    background-size: 100%;
    position: relative;
    
    .login-box{
      width: 800px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 0 20px rgba(137, 137, 137, 0.383);
      .login-text{
        float: left;
        width: 400px;
        height: 400px;
        background-color: rgba(197, 197, 197, 0.194);
        color: white;
        font-size:26px ;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        p{
          margin-bottom: 10px;
        }
      }
       #login{
        float: left;
        width: 400px;
        height: 400px;
        color: white;
        background: rgb(255, 255, 255);
        padding:40px;
        border-radius: 0 5px 5px 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .el-button{
          width: 100% !important;
          margin: 0 0 20px 0 !important;
        }
        .link{
          text-align: right;
          a{
            color: rgb(118, 118, 118);
            margin-left: 5px;
          }
        }
      }
    }
  }
  
  
</style>